<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap/font/bootstrap-icons.css">
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/jquery-3.6.0.min.js"></script>
</head>
<body>
<nav class="p-3 bg-dark text-white fixed-top">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">


            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                <li></li>
                <li><a href="/user/index" class="nav-link px-2 text-white"><i class="bi bi-house-door"></i>&nbsp;首页</a></li>
                <li></li>
                <li><a href="#" class="nav-link px-2 text-white"><i class="bi bi-filter-circle"></i>&nbsp;分类</a></li>
                <li></li>
                <li><a href="#" class="nav-link px-2 text-white"><i class="bi bi-collection-play"></i>&nbsp;直播</a></li>
                <li></li>
                <li><a href="#" class="nav-link px-2 text-white"><i class="bi bi-flower2"></i>&nbsp;动态</a></li>
                <li></li>
                <li><a href="#" class="nav-link px-2 text-white"><i class="bi bi-info-circle"></i>&nbsp;关于</a></li>
            </ul>

            <div class="d-flex align-items-center">
                <form class="w-100 me-3">
                    <input type="search" class="form-control" placeholder="搜索..." aria-label="Search">
                </form>

                <div class="flex-shrink-0 text-end" id="gotoLogin" style="display: none">
                    <button type="button" name="login" class="btn btn-outline-light me-2" onclick="javascript:location.href='/user/login'">登录</button>
                    <button type="button" name="register" class="btn btn-outline-light me-2" onclick="javascript:location.href='/user/register'">注册</button>
                </div>

                <div class="flex-shrink-0 dropdown">
                    <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2"
                       data-bs-toggle="dropdown" aria-expanded="false">
                        <img id="userAvatar" alt="mdo" width="32" height="32" class="rounded-circle">
                    </a>
                    <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser2">
                        <li><a class="dropdown-item" href="#"><i class="bi bi-camera-video"></i>&nbsp;上传视频</a></li>
                        <li><a class="dropdown-item" href="#"><i class="bi bi-clock-history"></i>&nbsp;历史记录</a></li>
                        <li><a class="dropdown-item" href="/user/userInfo" ><i class="bi bi-person"></i>&nbsp;个人中心</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" id="logout"><i class="bi bi-box-arrow-right"></i>&nbsp;退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>

<script th:inline="javascript">
    $(function () {
        let cookieData = JSON.parse([[${resData}]]);
        initNav(cookieData);
        gotoUserInfoPage();
    });

    function initNav(cookieData) {
        if (cookieData.resObj.avatar != null) {
            $("#gotoLogin").remove();
            $("#userAvatar").attr("src", cookieData.resObj.avatar);
        } else {
            $("#userAvatar").remove();
            $("#gotoLogin").css("display", "inline");
            $(".dropdown-menu").remove();
        }
    }
    function logout(){
        $("#logout").click(function (){
            $.post("/user/logout", function (data){
                location.href="/user/index";
            });
        });
    }
    function gotoUserInfoPage(){
        $("#userInfo").click(function (){
            document.write(userInfoPage.import.body.innerHTML);
        });
    }
</script>
<script src="/static/bootstrap/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

</body>
</html>